/**
  * @Description: WoShop商城
  * @Author: 梧桐
  * @Copyright: 武汉一一零七科技有限公司©版权所有
  * @Link: www.s1107.com
  * @Contact: QQ:2487937004
  */
 <template>
    <view >
      <u-swiper class="swiperBox" :list="swiperList" height="200" :name="'image_url'" :border-radius="0" ></u-swiper>
      <u-sticky >
        <div class="u-flex timeScroll u-col-center">
          <u-image class="iconSpike" :src="spikeIconSrc" width="74" height="82" mode="widthFix"></u-image>
          <scroll-view  class="scroll-view_H u-flex" scroll-x="true" scroll-with-animation="true"  :scroll-into-view="'active'+toId">
            <view class="scrollItem" :id="'active' + index" :class="[timeList.show == 1?'active' : '' ]"  v-for="(timeList,index) in limitList" :key="index" @click="clickTime(timeList.time)">
              <view class="scrollItemTime" :class="{active: timeList.cuxiao === 1}">{{timeList.time }}</view>
              <view class="scrollItemStatus" :class="{active: timeList.cuxiao === 1}">{{ timeList.cuxiao == 0?'即将开始':'抢购中' }}</view>
            </view>
          </scroll-view>
        </div>
      </u-sticky>

        <view class="spike-content">
           <view class="spike-time u-flex u-row-between" style="padding: 0 20upx" v-if="cuxiao == 0">
               <view>限时限量，好货低价</view>
               <view>剩余时间
                   <uni-countdown
                            @timeuptime="timeuptime"
                            color="#FFFFFF"
                            background-color="#FF6262"
                            border-color="#FF6262"
                            :day="0"
                            :hour="countDown.hour"
                            :minute="countDown.minute"
                            :second="countDown.second"
                            :show-day="false"
                            :show-colon="false">
                    </uni-countdown>
               </view>
           </view>
           <view class="spike-time u-flex u-row-between" style="padding: 0 20upx" v-if="show == 1">
               <view>限时限量，好货低价</view>
               <view>剩余时间
                   <uni-countdown
                            @timeuptime="timeuptime"
                            color="#FFFFFF"
                            background-color="#FF6262"
                            border-color="#FF6262"
                            :day="0"
                            :hour="countDown.hour"
                            :minute="countDown.minute"
                            :second="countDown.second"
                            :show-day="false"
                            :show-colon="false">
                    </uni-countdown>
               </view>
           </view>
           <view class="goodsCard" :class="{'greenColor': cuxiao===0}" v-for="(goods,index) in goodres" :key="index">
             <span class="goodsCardindex">{{index+1}}</span>
                <view class="u-flex" @click.stop="settes(goods.goods_id,goods.id)">
                    <u-image width="240" height="240" style="flex-shrink: 0;margin-right:20upx" border-radius="18" :src="goods.thumb_url" />
                    <view class="goodsCardRight">
                        <p class="u-line-1 goodsName" >{{goods.goods_name}}</p>
                      <u-tag text="促销" type="warning" shape="circle" plain size="mini" />
                        <view class="u-flex u-row-between u-col-center" style="width:100%">
                          <view class="priceBox">
                            <div class="u-flex" style="align-items: flex-end">
                              <span class="priceBox1">¥{{goods.price}}</span>
                              <span class="priceBox2">¥{{goods.shop_price}}</span>
                            </div>
                            <p class="lowerTips" v-if="false">{{$u.random(1, 105)}}天最低价格</p>
                          </view>
                            <view class="buyBtn" :class="{remind:cuxiao===0}" @click.stop="btnClick">
                              <span class="buyBtntxt1"> 抢购中</span>
                               <view class="buyBtntxt2" v-if="cuxiao!== 0&&false"><u-line-progress :percent="$u.random(0, 100)" :round="false" :show-percent="false" height="6" active-color="#fff" inactive-color="rgba(255,255,255,0.3)"></u-line-progress></view>
                            </view>

                        </view>
                    </view>
                </view>
           </view>


            <loadMore :loadingType="loadingType" ></loadMore>
        </view>

    </view>
</template>

<script>
import uniCountdown from "../../components/uni-countdown.vue";

let dataObj = {
    nowtime: '',
    page:1
}
export default {
    data(){
        return {
          swiperList:[],
            limitList:[],
            scrollLeft:0,
            toId:'',
            countDown:{
                hour:0,
                minute:0,
                second:10
            },
            goodres:[], // 商品列表
            loadingType:0,
            cuxiao: 0,  //0即将开始  1以开始
            limitdeIndex:0,
            show:0,
           lowerTime:12,
          spikeIconSrc:''
        }
    },
  onLoad(){
    this.spikeIconSrc  = this.STATICURL+'images/activity/icon-spikeIcon2.png'
 
    this.getBannerByType()
   
  },
    onShow(){
        if(!this.goodres.length ) {
            dataObj.page = 1
            this.loadingType = 0
            this.goodres = []
            this.getrushtime()
        }


    },
    onReachBottom:function(){
        // 上拉加载更多
        if(this.loadingType == 1 || this.loadingType == 2) { return false }
        this.loadingType = 1

        dataObj.page++
		this.getActivity(dataObj)
	},
    watch: {

    },

    methods: {
        btnClick(){
        
        },
      getBannerByType(){
        const data  = {
          type:2,
          pos_id:13
        }
        this.$http.getBannerByType(data).then(res=>{
          this.swiperList = res.data.list
        })
      },
        settes(id,id2){
            console.log(this.cuxiao)
            if(this.cuxiao === 0) {
                this.getnav('/pagesC/homeSon/spike_details?id='+id+ '&rush_id=' + id2)
            } else {
                this.getnav('/pagesC/homeSon/goodsDetails?id='+id+ '&rush_id=' + id2)
            }
        },
        /**
         * 点击选中时间段
         */
        clickTime(time){
            this.limitList.forEach( (el,index)=>{
                el.show = 0
                if(time == el.time) {
                    this.limitdeIndex = 0
                    el.show = 1
                    this.toId = index
                    dataObj.timeDate = el.countTime
                    dataObj.page = 1
                    this.loadingType = 0
                    this.goodres = []
                    this.$loading()
                    this.getActivity(dataObj)
                }

            })
        },
        getrushtime(){
            this.$http.getrushtime().then(res=>{
                if(res.status == 200) {

                    for(var i=0;i<res.data.length;i++) {
                        let element = res.data[i]
                        const date  = new Date(element.time * 1000)
                        const day = date.getDate()
                        const getHours = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
                        element.countTime = element.time
                        if(element.show == 1) {
                            this.toId = i
                            dataObj.timeDate = element.time
                            console.log(element.time)
                            this.getActivity(dataObj)
                        }
                        element.time = `${getHours}:00`
                    }
                    this.limitList = res.data

                }
            })
        },
        getActivity(data){
            this.$http.getActivity({nowtime:data.timeDate,page:data.page}).then(res=>{
                if(res.status == 200) {
                    this.cuxiao = res.data.cuxiao
                    this.show = res.data.show
                    if(Number(res.data.hdtime) > Number(res.data.dqtime)) {
                        let str = Number(res.data.hdtime) - Number(res.data.dqtime)
                        let  strArr = this.$formatSeconds(str).split('-')
                        this.countDown = {
                            hour:Number(strArr[0]),
                            minute:Number(strArr[1]),
                            second:Number(strArr[2])
                        }
                    } else if(Number(res.data.hdtime) <= Number(res.data.dqtime) && res.data.show == 1) {
                        let str = Number(res.data.end_time) - Number(res.data.dqtime)
                        let  strArr = this.$formatSeconds(str).split('-')
                        this.countDown = {
                            hour:Number(strArr[0]),
                            minute:Number(strArr[1]),
                            second:Number(strArr[2])
                        }
                    }

                    if(res.data.goodres.length == 0) {
                        this.loadingType = 2
                        return false
                    }

                    this.goodres = [...this.goodres,...res.data.goodres]
                    this.loadingType = 0

                }
            })
        },
        /**
         * 倒计时结束
         */
        timeuptime(){
            if(this.cuxiao == 0) {
                dataObj.page = 1
                this.loadingType = 0
                this.goodres = []
                this.getrushtime()
            }

        },
        limitdeClick(i){
            this.limitdeIndex = i
            dataObj.timeDate = i
            dataObj.page = 1
            this.loadingType = 0
            this.goodres = []
            this.$loading()
            this.getActivity(dataObj)
        }
    },
    components:{
        uniCountdown
    }
}
</script>

<style lang="scss" scoped>
page{
  background-color: #f5f5f5;
}
.scroll-view_H{
  overflow-x:scroll;
  white-space: nowrap;
}
.scrollItem{
  display: inline-block;
  font-weight: bolder;
  padding:0 25upx;
  &Time{
    font-size: 34upx;
    &.active{
      color: #FD1B48;
    }
  }
  &Status{
      color: #999;
    font-weight: normal;
    font-size:20upx;
    &.active{
      color:#fff;
      background-image: linear-gradient(to right,#FD1B48,#FE420C);
      border-radius: 100px;
      padding: 0 8upx;
    }
  }
}
.spike-content{
  margin-top: 20upx;

}
.spikeHeader{
  background-image:linear-gradient(to right,#FD015A,#FE2827);
  padding:30upx 0 20upx;
  padding-top: calc(var(--status-bar-height));
  text-align: center;
  position: fixed;
  top: 0;
  width:100%;
  z-index: 99;

}
.timeScroll{
  background-color: #fff;
  .iconSpike{
    margin: 30upx 20upx 0;
  }
}
.goodsCard{
  margin: 20upx;
  border-radius: 18upx;
  background-color: #fff;
  padding: 12upx;
  position: relative;
  &index{
    position: absolute;
    top: 20upx;
    left: 20upx;
    background-color: rgba(#000,0.3);
    width: 40upx;
    height: 40upx;
    line-height: 40upx;
    display: inline-block;
    z-index:999;
    text-align: center;
    color:#fff;
    border-radius:5upx
  }
  .goodsName{
    font-size: 30upx;
    font-weight: 800;
    color:#333
  }
  &Right{
    width:62%;
    height: 240upx;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .lowerTips{
      color:#999;
      font-size: 24upx;
    }
  }
  .priceBox{
    align-items: flex-end;
    &1{
      font-size: 42upx;
      color:#FD1B48;
      font-weight: bolder;
    }
    &2{
      color:#999;
      margin-left: 6upx;
    }
  }
  .buyBtn{
    padding:12upx 20upx;
    background-image:linear-gradient(to right,#FD184F,#FE420C);
    color:#fff;
    text-align:center;
    font-size:20upx;
    border-radius: 8upx;
    line-height: 28upx;
    flex-shrink: 0;
    &.remind{
      background-image:linear-gradient(to right, #0abb20, #80f38e);
    }
    &txt1{
      font-size: 30upx;
      font-weight: 800;
    }
    &txt2{
      font-size: 24upx;

    }
  }
}


</style>
